<template>
  <div class="menu" :class="{ hidden: isCollapse }">
    <Logo :collapse="isCollapse" />
    <div class="menu-container" ref="menuContainer">
      <el-scrollbar :height="scrollbarHeight" always>
        <el-menu class="el-menu" :collapse="isCollapse" :router="true" @open="handleOpen" @close="handleClose" select="handleSelectMenu" :default-active="defaultActive">
          <el-menu-item v-for="item in menuItems" :index="item.name" :route="{ path: item.name }">
            <el-icon><Calendar /></el-icon>
            <template #title>{{ item.meta.title }}</template>
          </el-menu-item>
          <template v-if="isDev">
            <el-menu-item>
              <el-icon><Medal /></el-icon>
              <template #title>【开发中】</template>
            </el-menu-item>
            <el-menu-item index="Overtime" :route="{ name: 'Overtime' }">
              <el-icon><Medal /></el-icon>
              <template #title>加班</template>
            </el-menu-item>
            <el-menu-item index="OvertimeList" :route="{ name: 'OvertimeList' }">
              <el-icon><Medal /></el-icon>
              <template #title>加班列表</template>
            </el-menu-item>
            <el-menu-item index="Leave" :route="{ name: 'Leave' }">
              <el-icon><Medal /></el-icon>
              <template #title>请假</template>
            </el-menu-item>
            <el-menu-item index="WorkingDesktop" :route="{ name: 'WorkingDesktop' }">
              <el-icon><Calendar /></el-icon>
              <template #title>工作台</template>
            </el-menu-item>
            <el-menu-item index="HumanStatistics" :route="{ name: 'HumanStatistics' }">
              <el-icon><SetUp /></el-icon>
              <template #title>人力统计(组)</template>
            </el-menu-item>
            <el-menu-item index="Statistics" :route="{ name: 'Statistics' }">
              <el-icon><SwitchFilled /></el-icon>
              <template #title>Statistics</template>
            </el-menu-item>
            <el-menu-item index="ProductionReport" :route="{ name: 'ProductionReport' }">
              <el-icon><VideoCameraFilled /></el-icon>
              <template #title>ProductionReport</template>
            </el-menu-item>
            <el-menu-item index="Chart" :route="{ name: 'Chart' }">
              <el-icon><PieChart /></el-icon>
              <template #title>图表</template>
            </el-menu-item>
            <el-menu-item index="QuickNavigation" :route="{ name: 'QuickNavigation' }">
              <el-icon><PieChart /></el-icon>
              <template #title>QuickNavigation</template>
            </el-menu-item>
            <el-menu-item index="Test" :route="{ name: 'Test' }">
              <el-icon><PieChart /></el-icon>
              <template #title>Test</template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <div>
      <el-menu class="el-menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
        <el-menu-item v-if="false">
          <el-icon><Setting /></el-icon>
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item @click="isCollapse = !isCollapse">
          <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
          <template #title>{{ isCollapse ? '展开' : '收起' }}</template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// import { useUsersStore } from '../../stores'
// import IUser from '../../interface/IUsers'
import { SetUp, Calendar, Setting, SwitchFilled, PieChart, VideoCameraFilled, Medal, Expand, Fold } from '@element-plus/icons-vue'
import Logo from './Logo.vue'
import http from '../../http'
import.meta.env

// const usersStore = useUsersStore()
const isCollapse = ref(false)
const menuContainer = ref(ref<HTMLElement | null>(null))
const scrollbarHeight = ref(400)
// const user = ref(usersStore.getAllState() || { role: 5 })
// console.log('user', user.value.role)
const defaultActive = ref<any>('')
const isDev = ref(true)
const router = useRouter()
const menuItems = ref<any[]>([])

if (import.meta.env.VITE_APP_ENV === 'production') {
  isDev.value = false
}
const route = useRoute()
watch(
  () => route.name,
  (newValue) => {
    console.log('route.name', newValue)
  }
)
onMounted(async () => {
  await getMenuItems()
  defaultActive.value = router.currentRoute.value.name
  // console.log('router', router.currentRoute.value.name, '')
  // const temp = usersStore.getAllState() as IUser
  if (menuContainer.value) {
    scrollbarHeight.value = menuContainer.value.offsetHeight
  }
})
/**
 * 异步获取菜单项
 *
 * 本函数通过发送HTTP GET请求来获取系统的菜单项，特别关注名为'Statistics'的菜单项的子菜单
 * 使用了async/await语法糖来处理异步操作，使得代码更加简洁易读
 */
const getMenuItems = async () => {
  // 发送HTTP GET请求，路径为'/dev-api/system/menu/getRouters'，无参数
  const res = await http({
    method: 'GET',
    path: '/dev-api/system/menu/getRouters',
    params: {},
  })
  // 在返回的数据中查找名为'Statistics'的菜单项，并将其子菜单赋值给menuItems.value
  // 如果没有找到，则menuItems.value为空数组
  menuItems.value = res.data.find((e: any) => e.name === 'Statistics')?.children || []
}
// /
/**
 * 处理打开事件
 *
 * @param key 要打开的项的键名
 * @param keyPath 要打开的项的键路径数组
 */
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
/**
 * 处理关闭事件
 *
 * @param key 关闭项的 key 值
 * @param keyPath 关闭项在树形结构中的路径数组
 */
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
/**
 * 处理选择菜单项的函数
 *
 * @param key 菜单项的键名
 */
// const handleSelectMenu = (key: string) => {
//   console.log(key)
// }
</script>

<style lang="scss" scoped>
.menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--el-border-color);
  width: 240px;
  transition: width 0.3s ease;
  overflow: hidden;
  &.hidden {
    width: 65px;
  }
  .menu-container {
    flex: 1;
    border-bottom: 1px solid var(--el-border-color);
  }
  .el-menu {
    border: 0;
  }
}
</style>
